```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Public APIs - 免费API资源宝库</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-bg {
            background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .gradient-text {
            background: linear-gradient(90deg, #3b82f6, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4.5rem;
            line-height: 0.65;
            margin: 0.1em 0.2em 0.1em 0;
            font-weight: 700;
            color: #3b82f6;
        }
    </style>
</head>
<body>
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4 md:py-32">
        <div class="container mx-auto max-w-6xl px-4">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">
                        <span class="gradient-text">Public APIs</span><br>
                        开发者资源宝库
                    </h1>
                    <p class="text-xl opacity-90 mb-8 drop-cap">
                        一个精心整理的免费API资源集合，为开发者提供便捷的第三方服务接入方案。无论是个人开发者还是企业团队，都能在这里找到所需的API接口。
                    </p>
                    <a href="https://github.com/public-apis/public-apis" target="_blank" class="inline-flex items-center px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg shadow-md hover:bg-gray-100 transition duration-300">
                        <i class="fab fa-github mr-2 text-xl"></i> 访问GitHub仓库
                    </a>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-full max-w-md">
                        <div class="absolute -top-6 -left-6 w-32 h-32 bg-purple-300 rounded-full opacity-20"></div>
                        <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-blue-300 rounded-full opacity-20"></div>
                        <div class="relative bg-white p-6 rounded-xl shadow-xl text-gray-800">
                            <div class="flex items-center mb-4">
                                <div class="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                                <div class="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                                <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                            </div>
                            <pre class="bg-gray-100 p-4 rounded-md overflow-x-auto text-sm">
<span class="text-blue-600">GET</span> <span class="text-purple-600">/api/weather?city=beijing</span>
<span class="text-green-600">HTTP/1.1 200 OK</span>
{
  "city": "Beijing",
  "temperature": "22°C",
  "condition": "Sunny",
  "humidity": "45%"
}</pre>
                            <div class="mt-4 text-sm text-gray-600">
                                <p><i class="fas fa-check-circle text-green-500 mr-2"></i> 1400+ 免费API</p>
                                <p><i class="fas fa-check-circle text-green-500 mr-2"></i> 20+ 分类领域</p>
                                <p><i class="fas fa-check-circle text-green-500 mr-2"></i> 社区驱动维护</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">核心功能概述</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">为开发者提供全面、高质量的API资源，加速开发流程</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <div class="feature-card bg-gray-50 p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-database text-blue-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">海量API资源</h3>
                    <p class="text-gray-600">提供超过1400个免费API接口，涵盖天气、金融、社交媒体等20多个类别，满足各种开发需求。</p>
                </div>
                
                <div class="feature-card bg-gray-50 p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-book-open text-purple-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">详细文档支持</h3>
                    <p class="text-gray-600">每个API条目包含详细的文档链接、认证要求和示例代码，助您快速上手集成。</p>
                </div>
                
                <div class="feature-card bg-gray-50 p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-filter text-green-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">智能筛选系统</h3>
                    <p class="text-gray-600">支持按类别、认证方式、HTTPS支持等条件进行筛选，快速定位所需API资源。</p>
                </div>
                
                <div class="feature-card bg-gray-50 p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-16 h-16 bg-yellow-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-heartbeat text-yellow-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">状态监控保障</h3>
                    <p class="text-gray-600">提供API状态监控，确保接口可用性，避免开发过程中遇到意外中断问题。</p>
                </div>
                
                <div class="feature-card bg-gray-50 p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-users text-red-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">社区驱动维护</h3>
                    <p class="text-gray-600">由全球开发者共同维护更新，确保API列表的时效性和质量，持续扩充新资源。</p>
                </div>
                
                <div class="feature-card bg-gray-50 p-8 rounded-xl shadow-md transition duration-300">
                    <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6">
                        <i class="fas fa-lock-open text-indigo-600 text-2xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3">零门槛使用</h3>
                    <p class="text-gray-600">完全免费使用，无需注册。所有API均为第三方提供，部分可能需要注册获取API密钥。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Usage Scenarios -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">使用场景</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">Public APIs 如何提升您的开发效率</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center text-white mr-4">
                            <i class="fas fa-bolt text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">快速开发原型</h3>
                    </div>
                    <p class="text-gray-600">无需从零开始构建基础功能，直接调用现成API，加速产品原型开发流程，让您专注于核心业务逻辑的实现。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center text-white mr-4">
                            <i class="fas fa-graduation-cap text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">学习API集成</h3>
                    </div>
                    <p class="text-gray-600">新手开发者可以通过实践掌握API调用技巧，学习RESTful接口设计规范，快速提升后端开发能力。</p>
                </div>
                
                <div class="bg-white p-8 rounded-xl shadow-sm">
                    <div class="flex items-center mb-4">
                        <div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center text-white mr-4">
                            <i class="fas fa-puzzle-piece text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">扩展应用功能</h3>
                    </div>
                    <p class="text-gray-600">为现有应用添加新特性，如天气信息、新闻推送、支付功能等，无需自行开发复杂后端系统。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Advantages Section -->
    <section class="py-20 px-4 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
                    <h2 class="text-3xl md:text-4xl font-bold mb-6">优势与特色</h2>
                    <ul class="space-y-4">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check-circle text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg">完全免费，无需注册</h3>
                                <p class="text-gray-600">所有API资源均可自由使用，没有隐藏费用。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check-circle text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg">质量保证</h3>
                                <p class="text-gray-600">所有API经过社区筛选和验证，确保稳定可靠。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check-circle text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg">分类清晰</h3>
                                <p class="text-gray-600">20+精心设计的分类体系，快速定位所需资源。</p>
                            </div>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 bg-blue-100 p-2 rounded-lg mr-4">
                                <i class="fas fa-check-circle text-blue-600"></i>
                            </div>
                            <div>
                                <h3 class="font-semibold text-lg">多种认证支持</h3>
                                <p class="text-gray-600">OAuth、API Key等多种认证方式，适应不同场景。</p>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-gray-50 p-6 rounded-xl">
                        <div class="mermaid">
                            graph TD
                                A[Public APIs] --> B[API分类]
                                B --> B1[天气]
                                B --> B2[金融]
                                B --> B3[社交媒体]
                                B --> B4[地图]
                                B --> B5[人工智能]
                                
                                A --> C[认证方式]
                                C --> C1[无认证]
                                C --> C2[API Key]
                                C --> C3[OAuth]
                                
                                A --> D[特色功能]
                                D --> D1[HTTPS支持]
                                D --> D2[状态监控]
                                D --> D3[社区维护]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started -->
    <section class="py-20 px-4 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">上手指南</h2>
                <p class="text-lg text-gray-600 max-w-2xl mx-auto">只需5步，开始使用Public APIs</p>
            </div>
            
            <div class="relative">
                <div class="hidden md:block absolute left-1/2 top-0 h-full w-1 bg-gray-200 transform -translate-x-1/2"></div>
                
                <div class="space-y-8 md:space-y-0">
                    <!-- Step 1 -->
                    <div class="flex flex-col md:flex-row items-center md:odd:flex-row-reverse mb-12">
                        <div class="md:w-1/2 mb-6 md:mb-0 md:px-10">
                            <div class="bg-white p-6 rounded-xl shadow-md">
                                <h3 class="text-2xl font-bold mb-3 flex items-center">
                                    <span class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">1</span>
                                    访问GitHub仓库
                                </h3>
                                <p class="text-gray-600">前往Public APIs的GitHub项目页面，浏览README获取最新信息。</p>
                                <a href="https://github.com/public-apis/public-apis" target="_blank" class="inline-block mt-4 text-blue-600 hover:text-blue-800 font-medium">
                                    <i class="fab fa-github mr-2"></i> 访问项目仓库
                                </a>
                            </div>
                        </div>
                        <div class="md:w-1/2 flex justify-center">
                            <div class="bg-white p-4 rounded-lg shadow-sm">
                                <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" alt="GitHub" class="w-32 h-32 object-contain">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 2 -->
                    <div class="flex flex-col md:flex-row items-center md:odd:flex-row-reverse mb-12">
                        <div class="md:w-1/2 mb-6 md:mb-0 md:px-10">
                            <div class="bg-white p-6 rounded-xl shadow-md">
                                <h3 class="text-2xl font-bold mb-3 flex items-center">
                                    <span class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">2</span>
                                    浏览API分类列表
                                </h3>
                                <p class="text-gray-600">探索20多个精心组织的API分类，从天气数据到人工智能服务应有尽有。</p>
                                <div class="mt-4 flex flex-wrap gap-2">
                                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">天气</span>
                                    <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">金融</span>
                                    <span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">社交媒体</span>
                                    <span class="bg-yellow-100 text-yellow-800 px-3 py-1 rounded-full text-sm">地图</span>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 flex justify-center">
                            <div class="bg-white p-4 rounded-lg shadow-sm">
                                <i class="fas fa-list-ul text-6xl text-blue-500"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 3 -->
                    <div class="flex flex-col md:flex-row items-center md:odd:flex-row-reverse mb-12">
                        <div class="md:w-1/2 mb-6 md:mb-0 md:px-10">
                            <div class="bg-white p-6 rounded-xl shadow-md">
                                <h3 class="text-2xl font-bold mb-3 flex items-center">
                                    <span class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">3</span>
                                    选择所需API
                                </h3>
                                <p class="text-gray-600">根据项目需求，筛选适合的API接口，考虑功能、认证方式和HTTPS支持等因素。</p>
                                <div class="mt-4">
                                    <div class="flex items-center text-sm text-gray-600 mb-2">
                                        <i class="fas fa-filter text-blue-500 mr-2"></i>
                                        <span>筛选条件：HTTPS支持、无需认证</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 flex justify-center">
                            <div class="bg-white p-4 rounded-lg shadow-sm">
                                <i class="fas fa-search text-6xl text-purple-500"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 4 -->
                    <div class="flex flex-col md:flex-row items-center md:odd:flex-row-reverse mb-12">
                        <div class="md:w-1/2 mb-6 md:mb-0 md:px-10">
                            <div class="bg-white p-6 rounded-xl shadow-md">
                                <h3 class="text-2xl font-bold mb-3 flex items-center">
                                    <span class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">4</span>
                                    查看文档和认证要求
                                </h3>
                                <p class="text-gray-600">仔细阅读API文档，了解请求参数、响应格式和认证方式(如需要)。</p>
                                <div class="mt-4">
                                    <div class="flex items-center text-sm text-gray-600 mb-2">
                                        <i class="fas fa-file-alt text-green-500 mr-2"></i>
                                        <span>查看官方文档</span>
                                    </div>
                                    <div class="flex items-center text-sm text-gray-600">
                                        <i class="fas fa-key text-yellow-500 mr-2"></i>
                                        <span>获取API密钥(如需)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 flex justify-center">
                            <div class="bg-white p-4 rounded-lg shadow-sm">
                                <i class="fas fa-book text-6xl text-green-500"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Step 5 -->
                    <div class="flex flex-col md:flex-row items-center md:odd:flex-row-reverse">
                        <div class="md:w-1/2 mb-6 md:mb-0 md:px-10">
                            <div class="bg-white p-6 rounded-xl shadow-md">
                                <h3 class="text-2xl font-bold mb-3 flex items-center">
                                    <span class="w-10 h-10 bg-blue-600 text-white rounded-full flex items-center justify-center mr-4">5</span>
                                    开始集成使用
                                </h3>
                                <p class="text-gray-600">根据文档说明，在您的项目中集成API，测试功能是否正常。</p>
                                <div class="mt-4">
                                    <div class="bg-gray-100 p-3 rounded-md">
                                        <code class="text-sm text-gray-800">
                                            fetch('https://api.example.com/data')<br>
                                            .then(response => response.json())<br>
                                            .then(data => console.log(data));
                                        </code>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="md:w-1/2 flex justify-center">
                            <div class="bg-white p-4 rounded-lg shadow-sm">
                                <i class="fas fa-code text-6xl text-indigo-500"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="py-20 px-4 bg-gradient-to-r from-blue-600 to-purple-600 text-white">
        <div class="container mx-auto max-w-4xl text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">立即开始您的API探索之旅</h2>
            <p class="text-xl opacity-90 mb-8 max-w-2xl mx-auto">加入全球数百万开发者的行列，利用Public APIs加速您的项目开发</p>
            <a href="https://github.com/public-apis/public-apis" target="_blank" class="inline-flex items-center px-8 py-4 bg-white text-blue-600 font-bold rounded-lg shadow-lg hover:bg-gray-100 transition duration-300 transform hover:scale-105">
                <i class="fab fa-github mr-3 text-2xl"></i> 访问GitHub仓库
            </a>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis',
            },
            themeCSS: `
                .node rect {
                    fill: #fff;
                    stroke: #3b82f6;
                    stroke-width: 2px;
                }
                .node text {
                    font-family: 'Noto Sans SC', sans-serif;
                }
                .edgePath path {
                    stroke: #64748b;
                    stroke-width: 2px;
                }
            `
        });
    </script>
</body>
</html>
```